import { Directive, HostListener, Input, ElementRef, Renderer2 } from '@angular/core';

@Directive({
  selector: '[appTimeSelect]'
})
export class TimeSelectDirective {

  @Input() isLeftKeyDown: boolean;
  isSelect: boolean;

  constructor(private el: ElementRef, private renderer: Renderer2) {
    this.isSelect = false;
  }

  @HostListener('mouseover', ['$event'])
  keydownEvent(event: KeyboardEvent) {
    console.log('isLeftKeyDown', this.isLeftKeyDown);
    if (this.isLeftKeyDown) {
      this.isSelect = !this.isSelect;
      const btn = this.el.nativeElement;
      console.log('hhhhhh:', btn);
      this.renderer.setStyle(btn, 'background', this.isSelect ? 'red' : 'gray');
    }
  }

}
